<template>
  <Layout style="height:100%">
    <Sider style="background:#eee;padding:15px 20px">
      <template>
        <Button type="text" ghost style="color:#11aef4" @click="treeType=1;getTreeList()">新闻</Button>
        <Button type="text" ghost style="color:#11aef4"@click="treeType=2;getTreeList()">产品</Button>
      </template>
      <Tree :data="data1" @on-select-change="selectTree"></Tree>
    </Sider>
    <Content>
      <template>
        <Button type="warning" @click="removeAllData()" style="margin:5px">RemoveAll</Button>
        <Input
          placeholder="Enter Object"
          style="width: 150px;margin:5px"
          v-model="searchObject"
          @input="change()"
        />
        <Input
          placeholder="Enter Commentor"
          style="width: 150px;margin:5px"
          v-model="searchCommentor"
          @input="change()"
        />
        <Button type="success" @click="search()" style="margin:5px">Search</Button>
      </template>

      <template>
        <Table
          border
          :columns="columns12"
          :data="data6"
          style="margin-bottom:10px"
          ref="selection"
          @on-select="selectRemove"
        >
          <template slot-scope="{ row }" slot="commentObject">
            <strong>{{ row.commentObject }}</strong>
          </template>
          <template slot-scope="{ row }" slot="action">
            <Button
              type="primary"
              size="small"
              style="margin-right: 5px"
              @click="update(row)"
            >Update</Button>
            <Button type="error" size="small" @click="remove(row._id)">Delete</Button>
          </template>
        </Table>
        <Page
          :total="total"
          show-sizer
          @on-change="changePage"
          :page-size-opts="[6,10,20,30,50]"
          :page-size="rows"
          @on-page-size-change="changePageSize"
        />
      </template>

      <Modal draggable v-model="modal" title="Comment" @on-ok="ok()" @on-cancel="cancel()">
        <template>
          <Form :label-width="10">
            <FormItem>
              <Input
                v-model="formItem.textarea"
                type="textarea"
                :autosize="{minRows: 5,maxRows: 10}"
                placeholder="Enter something..."
              ></Input>
            </FormItem>
          </Form>
        </template>
      </Modal>
    </Content>
  </Layout>
</template>

<script>
export default {
  data() {
    return {
      data1: [],
      columns12: [
        {
          type: "selection",
          width: 60,
          align: "center"
        },
        {
          title: "Object",
          slot: "commentObject"
        },
        {
          title: "Content",
          key: "commentContent"
        },
        {
          title: "Commentor",
          key: "commentator"
        },
        {
          title: "Time",
          key: "commentTime"
        },
        {
          title: "Action",
          slot: "action",
          width: 200,
          align: "center"
        }
      ],
      data6: [],
      total: 0,
      page: 1,
      rows: 6,

      modal: false,
      strIds: "",
      idStr: "",

      formItem: {
        textarea: "",
        objId: ""
      },
      searchObject: "",
      searchCommentor: "",
      searchObj: {},
      searchObj1: {},
      searchStr: "",
      time: new Date(),
      delIds: [],
      treeType: "1",
    };
  },
  methods: {
    changePage(page) {
      this.page = page;
      this.getList();
    },
    changePageSize(pageSize) {
      this.rows = pageSize;
      this.getList();
    },
    getTreeList() {
      this.axios({
        url: `http://localhost:3000/cate/list/${this.treeType}`,
        method: "post"
      }).then(res => {
        this.data1 = res.data;
      });
    },
    getCommentList() {
      this.axios({
        url: "http://localhost:3000/comment/list",
        method: "post",
        data: {
          page: this.page,
          rows: this.rows
        }
      }).then(res => {
        this.data6 = res.data.rows;
        this.total = res.data.total;
        //console.log(this.data6);
      });
    },
    remove(id) {
      this.$Modal.confirm({
        title: "Title",
        content: "<p>你确认要删除此条记录吗?</p>",
        onOk: () => {
          this.axios({
            url: `http://localhost:3000/comment/${id}`,
            method: "delete"
          }).then(res => {
            this.getCommentList();
          });
        },
        onCancel: () => {
          this.$Message.info("Clicked cancel");
        }
      });
    },
    update(row) {
      this.modal = true;
      this.formItem.textarea = row.commentContent;
      this.formItem.objId = row._id;
    },

    ok() {
      //this.cnvertToDateTime();
      //console.log(this.time);
      this.axios({
        url: `http://localhost:3000/comment/${this.formItem.objId}`,
        method: "put",
        data: {
          commentContent: this.formItem.textarea
          //commentTime: this.time
        }
      }).then(res => {
        //console.log(res);
        this.formItem.objId = "";
        this.getCommentList();
        this.formItem.textarea = "";
      });
    },
    cancel() {
      this.formItem.textarea = "";
    },

    selectRemove(selection, row) {
      this.strIds = "";
      console.log(selection);
      for (var value of selection) {
        this.strIds += value._id + ",";
      }
      this.strIds = this.strIds.substring(0, this.strIds.length - 1);
      //console.log(this.strIds);
    },
    removeAllData() {
      this.$Modal.confirm({
        title: "Title",
        content: "<p>你确认要删除此条记录吗?</p>",
        onOk: () => {
          this.axios({
            url: `http://localhost:3000/comment/removes`,
            method: "post",
            data: {
              ids: this.strIds
            }
          }).then(res => {
            this.getCommentList();
          });
        },
        onCancel: () => {
          this.$Message.info("Clicked cancel");
          this.handleSelectAll(false);
        }
      });
      //this.getList();
    },
    search() {
      this.searchObj = {};
      this.searchObj1 = {};
      this.searchStr = "";
      this.searchObj["commentObject"] = this.searchObject;
      this.searchObj["commentator"] = this.searchCommentor;
      for (var value in this.searchObj) {
        console.log(value);
        if (this.searchObj[value] && this.searchObj[value].length > 0) {
          this.searchObj1[value] = this.searchObj[value];
          this.searchStr += value + "=" + this.searchObj[value] + "&";
        }
      }
      console.log(this.searchObj1);
      console.log(this.searchStr.substring(0, this.searchStr.length - 1));
      this.axios({
        url: `http://localhost:3000/comment/fenlist/${this.searchStr}`,
        method: "post",
        data: this.searchObj1
      }).then(res => {
        //this.getCommentList();
        this.data6 = res.data;
      });
    },
    handleSelectAll(status) {
      this.$refs.selection.selectAll(status);
    },
    cnvertToDateTime: function() {
      var myDate = this.time;
      this.formatterDate2(myDate);
    },
    formatterDate2(date) {
      var datetime =
        date.getFullYear() +
        "-" +
        (date.getMonth() + 1 > 10
          ? date.getMonth() + 1
          : "0" + (date.getMonth() + 1)) +
        "-" +
        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) +
        " " +
        (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) +
        ":" +
        (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
        ":" +
        (date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds());
      this.time = datetime;
    },
    selectTree(arr) {
      console.log(arr);
      this.delIds = [];
      this.fu(arr);
      this.idStr = 'commentObjectId=' + this.delIds[0];
      console.log(this.delIds);
      /* this.axios({
        url: `http://localhost:3000/comment/fenlist/${idStr}`,
        method: "post",
      }).then(res => {
        console.log(res);
        //this.data6=res.data;
      }); */
      //console.log(this.delIds);
    },
    fu(arr) {
      for (var i = 0, len = arr.length; i < len; i++) {
        this.delIds.push(arr[i]._id);
        //console.log(this.delIds);
        if (arr[i].children) {
          this.fu(arr[i].children);
        }
      }
      return this.delIds;
    }
  },

  mounted() {
    this.getTreeList(this.treeType);
    this.getCommentList();
  }
};
</script>